<template>
  <div class="feature-out" style="height: auto;">
    <div ref="searchDiv">
      <div class="filter-container">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          size="small"
          align="left"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          class="filter-item"
          style="width: 360px;"
          :picker-options="pickerOptions"
          @change="onDatePickerChange"
        ></el-date-picker>
        <el-button
          @click="handleFilter"
          size="small"
          type="primary"
          class="filter-item"
          ref="btnQuery"
        >
          查询
        </el-button>
        <el-button
          @click="handleReset"
          size="small"
          type="primary"
          class="filter-item"
          ref="btnRefresh"
        >
          重置
        </el-button>
      </div>
    </div>
    <div class="risk-pre">
      <div class="title">客户风险分布</div>
      <!-- <div id="userPie3" ref="userPie3"></div> -->
      <dashboard-Pie :chart-data="riskPre" />
    </div>

    <div class="risk-line">
      <div class="title">客户风险趋势</div>
      <dashboard-Line :chart-data="riskLine" />
    </div>
  </div>
</template>

<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'

import {
  customRiskDistribute,
  customRiskTrend
} from '@/api/risksystem/loanWarning/index'
import dashboardLine, { ILineChartData } from './components/dashboardLine.vue'
import dashboardPie, { moneyPieData } from './components/dashboardPie.vue'
// import agePie, { agePieData } from './age.vue'
@Component({
  name: 'dashboard',
  components: {
    //引用的组件在这里声明
    dashboardLine,
    dashboardPie
  }
})
export default class extends Vue {
  private startDate = new Date().setTime(
    new Date().getTime() - 3600 * 1000 * 24 * 7
  )
  private endDate = new Date()
  private dateRange = [
    this.formatDate(new Date(this.startDate)),
    this.formatDate(new Date(this.endDate))
  ]
  private minTime: any = null
  private maxTime: any = null
  private pickerOptions: any = {
    onPick: ({ maxDate, minDate }: any) => {
      // 如果选择了只选择了一个时间
      if (!maxDate) {
        this.minTime = minDate.getTime() // 最小时间
        this.maxTime = minDate.getTime() // 最大时间
      } else {
        this.minTime = this.maxTime = null
      }
    },
    disabledDate: (time: any) => {
      if (this.minTime) {
        return (
          time < new Date(this.minTime - 366 * 24 * 3600 * 1000) ||
          time > new Date(this.minTime + 366 * 24 * 3600 * 1000)
        )
      }
    }
  }
  private riskLine: any = {}
  private riskPre: any = []
  private listQuery: any = {
    search: {
      startTime: Date.parse(this.dateRange[0]) / 1000,
      endTime: Date.parse(this.dateRange[1]) / 1000
    }
  }
  @Watch('dateRange')
  private onDatePickerChange(value: boolean) {
    this.listQuery.search.startTime = this.dateRange
      ? Date.parse(this.dateRange[0]) / 1000
      : undefined
    this.listQuery.search.endTime = this.dateRange
      ? Date.parse(this.dateRange[1]) / 1000
      : undefined
  }

  private pickChange(time: any) {
    console.log(time)
    this.pickerOptions = {
      disabledDate(time: any) {
        return (
          time.getTime() <
          new Date(this.dateRange[0]).getTime() - 3600 * 1000 * 24 * 8
        )
      }
    }
  }
  created() {
    // 最早可以调用vue组件method的钩子
  }
  mounted() {
    this.getLineData()
    this.getamountData()
  }

  private methodExp() {
    // method创建地方
  }
  // 搜索
  private handleFilter() {
    this.getLineData()
    this.getamountData()
  }
  // 重置
  private handleReset() {
    this.dateRange = [
      this.formatDate(new Date(this.startDate)),
      this.formatDate(new Date(this.endDate))
    ]
    this.listQuery = {
      search: {
        startTime: Date.parse(this.dateRange[0]) / 1000,
        endTime: Date.parse(this.dateRange[0]) / 1000
      }
    }
    this.getLineData()
    this.getamountData()
  }
  // 进件分时统计
  private async getLineData() {
    const { data } = await customRiskTrend(this.listQuery)
    this.riskLine = data
  }
  // 金额分布
  private async getamountData() {
    const { data } = await customRiskDistribute(this.listQuery)
    console.log(data)
    var legend = data.stats.map(function(item: any) {
      return item.name
    })
    this.riskPre = [data.stats, legend]
  }
  private formatDate(now: any) {
    var year = now.getFullYear() //取得4位数的年份
    var month = now.getMonth() + 1 //取得日期中的月份，其中0表示1月，11表示12月
    var date = now.getDate() //返回日期月份中的天数（1到31）
    var hour = now.getHours() //返回日期中的小时数（0到23）
    var minute = now.getMinutes() //返回日期中的分钟数（0到59）
    var second = now.getSeconds() //返回日期中的秒数（0到59）
    return (
      year +
      '-' +
      (month < 10 ? '0' + month : month) +
      '-' +
      (date < 10 ? '0' + date : date)
    )
  }
}
</script>

<style lang="scss" scoped>
.feature-out {
  height: auto !important;
}
</style>
